<template>
  <div class="bg-fff h-100p bdr-10 pd-10">
    <v-panel-top>
      <el-button type="primary" @click="showSalesmen">新建业务员</el-button>
    </v-panel-top>
    <v-plain-table :native="{stripe:true}" :data="salesmen" @change="change">
      <template slot="expand" slot-scope="{scope}">
        <el-button type="text" @click="$router.push(`/member/detail/${scope.row.id}`)">
          详情
        </el-button>
        <el-button type="text" @click="edit(scope.row)">
          编辑
        </el-button>
        <el-button type="text" @click="frozen(scope.row.id)">
          冻结
        </el-button>
      </template>
    </v-plain-table>
    <v-edit-salesmen-dialog ref="edit-salesmen-dialog" @initList="getChannelProviders"/>
    <v-plain-form
      ref="form-append-salesmen"
      title="新建业务员"
      confirmText="添加"
      :form="formSalesmen"
      :rules="ruleSalesmen"
      @confirm="confirmSalesmen"
    >
      <template slot-scope="{form}" slot="expand">
        <el-form-item :label="form.profitRatio.label" prop="profitRatio.value">
          掌柜利润 X
          <el-input-number
            size="mini"
            v-model="form.profitRatio.value"
            :precision="0"
            :step="1"
            :min="0"
            :controls="false"
            :max="100"/>
          %
        </el-form-item>
      </template>
    </v-plain-form>
  </div>
</template>
<script lang="ts">

  import { Component, Vue } from 'vue-property-decorator'
  import vPlainTable from '@/components/plain-table'
  import vPanelTop from '@/components/pannel-top'
  import vPlainForm from '@/components/plain-form'
  import md5 from 'md5'
  import vEditSalesmenDialog from '../edit'

  @Component({
    components: {
      vPlainTable, vPanelTop, vPlainForm, vEditSalesmenDialog
    }
  })
  export default class salesmen extends Vue {
    salesmen: TableData = {
      header: [
        {
          label: '账号',
          key: 'username'
        },
        {
          label: 'id',
          key: 'id'
        },
        {
          label: '姓名',
          key: 'realName'
        },
        {
          label: '联系方式',
          key: 'contactInformation'
        },
        {
          label: '创建日期',
          key: 'createTime',
          formatter: row => this.$utils.toTimeFormat(row.createTime)
        },
        {
          label: '企业数量',
          key: 'memberCount'
        },
        {
          label: '利润配比',
          key: 'profitRatio'
        },
        {
          label: '最后登录',
          key: 'date',
          formatter: row => this.$utils.toTimeFormat(row.lastLoginTime)
        }
      ],
      body: [],
      footer: {
        total: 0,
        currentPage: 1
      }
    }
    userId = ''
    formSalesmen = {
      realName: {
        value: '',
        label: '姓名',
        placeholder: '请输入姓名',
        type: 'input'
      },
      profitRatio: {
        value: '',
        label: '利润配比',
        placeholder: '',
        type: 'chore'
      },
      contactInformation: {
        value: '',
        label: '联系方式',
        placeholder: '请输入联系方式',
        type: 'input',
        maxlength: 11
      },
      username: {
        value: '',
        label: '账号',
        placeholder: '请输入账号',
        type: 'input'
      },
      password: {
        value: '',
        label: '密码',
        placeholder: '请输入密码',
        type: 'input'
      }
    }
    ruleSalesmen = {
      'profitRatio.value': [
        {required: true, message: '请输入利润配比', trigger: 'change'}
      ],
      'realName.value': [
        {required: true, message: '请输入姓名', trigger: 'change'}
      ],
      'username.value': [
        {required: true, message: '请输入账号', trigger: 'change'},
        {min: 6, message: '账号名称不得少于6个字符', trigger: 'blur'}
      ],
      'contactInformation.value': [
        {required: true, message: '请输入联系方式', trigger: 'change'},
        {
          pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
          message: '手机号码错误',
          trigger: 'blur'
        }
      ],
      'password.value': [
        {required: true, message: '请输入密码', trigger: 'change'},
        {min: 6, message: '密码不得少于6个字符', trigger: 'blur'},
        {max: 20, message: '密码不得多于20个字符', trigger: 'blur'}
      ]
    }

    change () {
      this.salesmen.footer.currentPage = page
      this.getSalesmen()
    }

    showSalesmen () {
      this.$refs['form-append-salesmen'].openDialog({
        roleType: 4,
        realName: '',
        contactInformation: ''
      })
    }

    async confirmSalesmen (form) {
      let postData = {
        ...form,
        password: md5(form.password).toLocaleUpperCase()
      }
      let res = await  this.$axios.post('g/gateway/channelprovider/addsalesman', postData)
      this.getSalesmen()
      this.$utils.tips(res)
    }

    async getSalesmen () {
      let res: AjaxResponse = await this.$axios.post('g/gateway/channelprovider/salesman/list', {
        pageSize: 10,
        currentPage: this.salesmen.footer.currentPage,
        userId: this.userId
      })
      this.salesmen.body = res.data.items
      this.salesmen.footer.total = res.data.totalNum
      this.salesmen.footer.currentPage = res.data.currentPage
    }
    
    edit (row) {
      this.$refs['edit-salesmen-dialog'].openDialog(row)
    }

    getChannelProviders () {
      this.getSalesmen()
    }

    async confirm (id) {
      let res: AjaxResponse = await this.$axios.post('g/gateway/channelprovider/freeze', {
        userId: id
      })
      this.$utils.tips(res)
    }

    frozen (id) {
      this.$confirm('确定此操作吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.confirm (id)
      }).catch(() => {
                 
      });
      
    }

    mounted () {
      this.userId = JSON.parse(window.sessionStorage.getItem('userInfo')).userId
      this.getSalesmen()
    }
  }
</script>
